<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        /*
            注意: 浮动时的层级是处在同一层级的 而非浮动幅度不一
            静态定位 默认值: position:static;
            使用了其他定位才能使用其属性
            层级: z-index
         */
        .fu {
            background-color: #ff0;
        }

        .fu > div {
            width: 100px;
            height: 100px;
        }

        .z1 {
            background-color: #f00;
            /* 3. 注意 要先使用position才能移动位置 调整层级 */
            position: relative;
            z-index: 10; /* 3. 整数 默认0 数值越大 层级越高 */
            left: 50px;
        }

        .z2 {
            background-color: #0f0;
            /* 1. 静态定位 默认值 */
            position: static;
            /*
                2. 相对定位
                   移动参照物为自身 即表示距离自己的上方远了50px
                   移动中会将部分元素覆盖而非挤开 相对温和
                   不脱离文档流 不释放布局空间 也不会挤开其他元素 但是会发生遮盖
             */
            position: relative;
            top: 50px;
            left: 50px; /* 2. 表示距离自身原来左侧的位置远了50px */
            z-index: -1; /* 3. 层级可以为负数 会向下移动一层层级 */
        }

        .z3 {
            background-color: #00f;
        }
    </style>
</head>
<body>
<!-- .fu>.z*3 -->
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
</div>
</body>
</html>